<template>
  <div class="nav">
    <mu-tabs :value="activeTab" @change="handleTabChange">
      <mu-tab value="tab1" title="推荐" href="/#/recomend" />
      <mu-tab value="tab2" title="歌手" href="/#/singer" />
      <mu-tab value="tab3" title="排行" href="/#/rank" />
      <mu-tab value="tab3" title="搜索" href="/#/search" />
    </mu-tabs>
  </div>
</template>
<script>
  export default {
    name: "nav_tab",
    data() {
      return {
        activeTab: "tab1"
      };
    },
    methods: {
      handleTabChange(val) {
        this.activeTab = val
      },
    }
  }

</script>
<style lang="scss" scoped>
  .nav {
    .mu-tabs {
      z-index: initial
    }
  }

</style>
